<template>
  <div class="profile-page">
  <div class="user-info">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <img :src="userInfo.image" class="user-img" />
          <h4>{{userInfo.username}}</h4>
          <p v-if="userInfo.bio">{{userInfo.bio}}</p>
          <button class="btn btn-sm btn-outline-secondary action-btn" @click.prevent="$router.push('/settings')" v-if="user.username === userInfo.username">
            <i class="ion-gear-a"></i>
            &nbsp;
            Edit Profile Settings
          </button>
          <span v-else>
            <button class="btn btn-sm btn-outline-secondary action-btn" @click="cancelFollowUser" v-if="followUser.following">
            <i class="ion-plus-round"></i>
            &nbsp;
            {{'UnFollow ' + followUser.username}}
          </button>
          <button class="btn btn-sm btn-outline-secondary action-btn" @click="FollowUser" v-else>
            <i class="ion-plus-round"></i>
            &nbsp;
            {{'Follow ' + followUser.username}}
          </button>
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-10 offset-md-1">
        <div class="articles-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
              <router-link :to="'/profile/' + userInfo.username + '/myarticles'" class="nav-link" :class="$route.path.includes('/myarticles') ? 'active' : ''">My Articles</router-link>
            </li>
            <li class="nav-item">
              <router-link :to="'/profile/' + userInfo.username + '/favarticles'" class="nav-link" :class="$route.path.includes('/favarticles') ? 'active' : ''">Favorited Articles</router-link>
            </li>
          </ul>
        </div>

        <router-view />
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {reqGetUserInfo, reqFollowAuthor, reqUnFollowAuthor} from '../../api/profile'
import {mapState} from 'vuex'
export default {
  name:'ProfilePages',
  data () {
    return {
       userInfo:{},
       followUser: {},
    };
  },
  methods: {
    // 获取用户信息
    async getUserInfo(){
      const result = await reqGetUserInfo(this.$route.params.uid)
      this.userInfo = result.profile
    },

    async getFollowUser(){
      const result = await reqFollowAuthor(this.$route.params.uid)
      this.followUser = result.profile
    },

    // 取消关注用户
    async cancelFollowUser(){
      const result = await reqUnFollowAuthor(this.$route.params.uid)
      this.followUser = result.profile
    },
    // 关注用户
    async FollowUser(){
      const result = await reqFollowAuthor(this.$route.params.uid)
      this.followUser = result.profile
    }
  },
  created() {
    this.getUserInfo()
    this.getFollowUser()
  },
  watch: {
    "$route.path"() {
      this.getUserInfo()
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
}

</script>
<style lang='less' scoped>
</style>